<script setup lang="ts" name="App">
import { ref } from 'vue'
// 目标：获取 DOM
// #1 准备一个 ref 引用
const h3Ele = ref<HTMLHeadingElement | null>(null)

const handleClick = () => {
  // 写法 1
  /* if (h3Ele.value) {
    h3Ele.value.style.backgroundColor = 'teal'
  } */
  // 写法 2：断言
  // ;(h3Ele.value as HTMLHeadingElement).style.background = 'pink'
  // 写法 3：非空断言（排除掉 null 或 undefined 的情况），我断言一定不是 null 或 undefined
  h3Ele.value!.style.backgroundColor = 'teal'
  // 我用问号可以吗？这儿不行，因为如果 h3Ele.value 是 null 或 undefined，整体返回就是 undefined，代码变成了这样 undefined = 'teal'，语法错误
  // 存在赋值的情况一般用到是 ! 号
  // h3Ele.value?.style.backgroundColor = 'teal'
}
// 非空断言不能乱用，我确保它不为空我采用
// h3Ele.value!.style.backgroundColor = 'teal'
</script>
<template>
  <div>
    <!-- #2 和 h3 的 ref 属性进行绑定 -->
    <h3 ref="h3Ele">Hello Vue3 + TS</h3>

    <button @click="handleClick">改变颜色</button>
  </div>
</template>
